@use "sass:map";
@use "sass:math";
@import '../../theme/common/var.scss';
@import '../../theme/common/mixin.scss';
@import '../../theme/common/transition.scss';

@mixin menu-item {
    height: 56px;
    line-height: 56px;
    font-size: $--menu-item-font-size;
    color: $--menu-item-font-color;
    padding: 0 20px;
    list-style: none;
    cursor: pointer;
    position: relative;
    transition: border-color .3s, background-color .3s, color .3s;
    box-sizing: border-box;
    white-space: nowrap;

    * {
        vertical-align: middle;
    }

    i {
        color: $--color-text-secondary;
    }

    &:hover,
    &:focus {
        outline: none;
        background-color: $--menu-item-hover-fill;
    }

    @include when(disabled) {
        opacity: 0.25;
        cursor: not-allowed;
        background: none !important;
    }
}

@include b(menu-item) {
    @include menu-item;

    & [class^="wu-icon-"] {
        margin-right: 5px;
        width: 24px;
        text-align: center;
        font-size: 18px;
        vertical-align: middle;
    }
    @include when(active) {
        color: $--color-primary;
        i {
            color: inherit;
        }
    }
}
